<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #id1{
            background: #F9FBCB;
            width: 200px;
            height: 200px;
            border: aquamarine 5px;
            border-radius: 150px;/*圆角*/
            border-style:solid;
        }
        #id2{
            background: antiquewhite;
            width: 150px;
            height: 150px;
            border: #F8F8F3 5px;
            border-radius: 150px;/*圆角*/
            border-style:solid;
            margin-top: 20px;
            margin-left: 20px;
        }
        #id3{
            background: red;
            width: 50px;
            height: 50px;
            border: #FAA53B 5px;
            border-radius: 150px;/*圆角*/
            border-style:solid;
            margin-top: 43px;
            margin-left: 43px;
        }
    </style>

    <!--none	定义无边框。
        hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
        dotted	定义点状边框。在大多数浏览器中呈现为实线。
        dashed	定义虚线。在大多数浏览器中呈现为实线。
        solid	定义实线。
        double	定义双线。双线的宽度等于 border-width 的值。
        groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
        ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
        inset	定义 3D inset 边框。其效果取决于 border-color 的值。
        outset	定义 3D outset 边框。其效果取决于 border-color 的值。
        inherit	规定应该从父元素继承边框样式。-->
</head>
<body>
<div id="id1">
    <div id="id2">
        <div id="id3">
        </div>
    </div>
</div>
</body>
</html>